Dekoratory JavaScript: Programowanie metadanych i wzorce AOP

Dekoratory JavaScript to potężna i ekspresyjna funkcja metaprogramowania, która pozwala modyfikować lub ulepszać zachowanie klas, metod, właściwości i parametrów w sposób deklaratywny i wielokrotnego użytku. Zapewniają one zwięzłą składnię do dodawania metadanych i implementowania zasad Programowania Zorientowanego Aspektowo (AOP), poprawiając możliwość ponownego użycia kodu, czytelność i łatwość konserwacji. Ten obszerny przewodnik szczegółowo omówi dekoratory JavaScript, omawiając ich składnię, użycie i zastosowania w różnych scenariuszach. Chociaż oficjalnie jest to wciąż ewoluująca propozycja, dekoratory są szeroko stosowane, zwłaszcza w frameworkach takich jak Angular i NestJS, a ich wpływ na rozwój JavaScript jest niezaprzeczalny.

Czym są dekoratory JavaScript?

Dekoratory to specjalny typ deklaracji, który można dołączyć do deklaracji klasy, metody, akcesora, właściwości lub parametru. Używają one formy @expression, gdzie expression musi być wartościowane do funkcji, która zostanie wywołana w czasie wykonywania z informacjami o dekorowanej deklaracji. Zasadniczo dekoratory działają jako funkcje, które opakowują lub modyfikują dekorowany element, pozwalając na dodanie dodatkowej funkcjonalności lub metadanych bez bezpośredniej modyfikacji oryginalnego kodu.

Pomyśl o dekoratorach jak o adnotacjach lub znacznikach, które można dołączyć do elementów kodu. Znaczniki te mogą być następnie przetwarzane w czasie wykonywania w celu wykonywania różnych zadań, takich jak rejestrowanie, walidacja, autoryzacja lub wstrzykiwanie zależności. Dekoratory promują czystszą i bardziej modułową strukturę kodu, oddzielając kwestie i zmniejszając kod boilerplate.

Korzyści z używania dekoratorów

• Ulepszone ponowne wykorzystanie kodu: Dekoratory pozwalają na hermetyzację wspólnego zachowania w komponentach wielokrotnego użytku, które można zastosować do wielu części aplikacji. Zmniejsza to duplikację kodu i promuje spójność.
• Ulepszona czytelność: Oddzielając zagadnienia przekrojowe do dekoratorów, możesz uczynić swoją podstawową logikę czystszą i łatwiejszą do zrozumienia. Dekoratory zapewniają deklaratywny sposób wyrażania dodatkowego zachowania, dzięki czemu kod staje się bardziej samo-dokumentujący.
• Zwiększona możliwość konserwacji: Dekoratory promują modułowość i separację kwestii, ułatwiając modyfikację lub rozszerzanie aplikacji bez wpływu na inne części bazy kodu. Zmniejsza to ryzyko wprowadzenia błędów i upraszcza proces konserwacji.
• Programowanie zorientowane aspektowo (AOP): Dekoratory umożliwiają implementację zasad AOP, pozwalając na wstrzykiwanie zachowania do istniejącego kodu bez modyfikowania jego kodu źródłowego. Jest to szczególnie przydatne w przypadku obsługi kwestii przekrojowych, takich jak rejestrowanie, bezpieczeństwo i zarządzanie transakcjami.

Typy dekoratorów

Dekoratory JavaScript można stosować do różnych typów deklaracji, z których każda ma swój własny, specyficzny cel i składnię:

Dekoratory klas

Dekoratory klas są stosowane do konstruktora klasy i mogą być używane do modyfikowania definicji klasy lub dodawania metadanych. Dekorator klasy otrzymuje konstruktor klasy jako jedyny argument.

Przykład: Dodawanie metadanych do klasy.

            
function Component(options: { selector: string, template: string }) {
  return function (constructor: T) {
    return class extends constructor {
      selector = options.selector;
      template = options.template;
    }
  }
}

@Component({ selector: 'my-component', template: '
Hello
' })
class MyComponent {
  constructor() {
    // ...
  }
}

console.log(new MyComponent().selector); // Output: my-component

            

              
                Copy
              
            
          

W tym przykładzie dekorator Component dodaje właściwości selector i template do klasy MyComponent, co pozwala na konfigurowanie metadanych komponentu w sposób deklaratywny. Jest to podobne do sposobu definiowania komponentów Angular.

Dekoratory metod

Dekoratory metod są stosowane do metod w klasie i mogą być używane do modyfikowania zachowania metody lub dodawania metadanych. Dekorator metody otrzymuje trzy argumenty:

• Obiekt docelowy (albo prototyp klasy, albo konstruktor klasy, w zależności od tego, czy metoda jest statyczna).
• Nazwę metody.
• Deskryptor właściwości dla metody.

Przykład: Rejestrowanie wywołań metod.

            
function Log(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
  const originalMethod = descriptor.value;

  descriptor.value = function (...args: any[]) {
    console.log(`Calling ${propertyKey} with arguments: ${JSON.stringify(args)}`);
    const result = originalMethod.apply(this, args);
    console.log(`${propertyKey} returned: ${result}`);
    return result;
  }

  return descriptor;
}

class Calculator {
  @Log
  add(a: number, b: number) {
    return a + b;
  }
}

const calculator = new Calculator();
calculator.add(2, 3); // Output: Calling add with arguments: [2,3]
                     //         add returned: 5

            

              
                Copy
              
            
          

W tym przykładzie dekorator Log rejestruje wywołanie metody i jej argumenty przed wykonaniem oryginalnej metody i rejestruje wartość zwracaną po wykonaniu. Jest to prosty przykład tego, jak dekoratory mogą być używane do implementacji rejestrowania lub funkcji audytu bez modyfikowania podstawowej logiki metody.

Dekoratory właściwości

Dekoratory właściwości są stosowane do właściwości w klasie i mogą być używane do modyfikowania zachowania właściwości lub dodawania metadanych. Dekorator właściwości otrzymuje dwa argumenty:

• Obiekt docelowy (albo prototyp klasy, albo konstruktor klasy, w zależności od tego, czy właściwość jest statyczna).
• Nazwę właściwości.

Przykład: Walidacja wartości właściwości.

            
function Validate(target: any, propertyKey: string) {
  let value: any;

  const getter = function () {
    return value;
  };

  const setter = function (newVal: any) {
    if (typeof newVal !== 'number' || newVal < 0) {
      throw new Error(`Invalid value for ${propertyKey}. Must be a non-negative number.`);
    }
    value = newVal;
  };

  Object.defineProperty(target, propertyKey, {
    get: getter,
    set: setter,
    enumerable: true,
    configurable: true,
  });
}

class Product {
  @Validate
  price: number;

  constructor(price: number) {
    this.price = price;
  }
}

const product = new Product(10);
console.log(product.price); // Output: 10

try {
  product.price = -5; // Throws an error
} catch (e) {
  console.error(e.message);
}

            

              
                Copy
              
            
          

W tym przykładzie dekorator Validate waliduje właściwość price, aby upewnić się, że jest ona liczbą nieujemną. Jeśli zostanie przypisana nieprawidłowa wartość, zostanie zgłoszony błąd. Jest to prosty przykład tego, jak dekoratory mogą być używane do implementacji walidacji danych.

Dekoratory parametrów

Dekoratory parametrów są stosowane do parametrów metody i mogą być używane do dodawania metadanych lub modyfikowania zachowania parametru. Dekorator parametru otrzymuje trzy argumenty:

• Obiekt docelowy (albo prototyp klasy, albo konstruktor klasy, w zależności od tego, czy metoda jest statyczna).
• Nazwę metody.
• Indeks parametru na liście parametrów metody.

Przykład: Wstrzykiwanie zależności.

            
import 'reflect-metadata';

const Injectable = (): ClassDecorator => {
    return (target: any) => {
        Reflect.defineMetadata('injectable', true, target);
    };
};

const Inject = (token: string): ParameterDecorator => {
    return (target: any, propertyKey: string | symbol, parameterIndex: number) => {
        let existingParameters: string[] = Reflect.getOwnMetadata('parameters', target, propertyKey) || [];
        existingParameters[parameterIndex] = token;
        Reflect.defineMetadata('parameters', existingParameters, target, propertyKey);
    };
};

@Injectable()
class Logger {
    log(message: string) {
        console.log(`Logger: ${message}`);
    }
}

class Greeter {
    private logger: Logger;

    constructor(@Inject('Logger') logger: Logger) {
        this.logger = logger;
    }

    greet(name: string) {
        this.logger.log(`Hello, ${name}!`);
    }
}

// Simple dependency injection container
class Container {
    private dependencies: Map = new Map();

    register(token: string, dependency: any) {
        this.dependencies.set(token, dependency);
    }

    resolve(target: any): T {
        const parameters: string[] = Reflect.getMetadata('parameters', target) || [];
        const resolvedDependencies = parameters.map(token => this.dependencies.get(token));
        return new target(...resolvedDependencies);
    }
}

const container = new Container();
container.register('Logger', new Logger());

const greeter = container.resolve(Greeter);
greeter.greet('World'); // Output: Logger: Hello, World!

            

              
                Copy
              
            
          

W tym przykładzie dekorator Inject jest używany do wstrzykiwania zależności do konstruktora klasy Greeter. Dekorator kojarzy token z parametrem, którego można następnie użyć do rozwiązania zależności za pomocą kontenera wstrzykiwania zależności. Ten przykład prezentuje podstawową implementację wstrzykiwania zależności za pomocą dekoratorów i biblioteki reflect-metadata.

Praktyczne przykłady i przypadki użycia

Dekoratory JavaScript mogą być używane w różnych scenariuszach, aby poprawić jakość kodu i uprościć rozwój. Oto kilka praktycznych przykładów i przypadków użycia:

Rejestrowanie i audyt

Dekoratory mogą być używane do automatycznego rejestrowania wywołań metod, argumentów i wartości zwracanych, zapewniając cenny wgląd w zachowanie i wydajność aplikacji. Może to być szczególnie przydatne w debugowaniu i rozwiązywaniu problemów.

            
function LogMethod(target: any, propertyKey: string, descriptor: PropertyDescriptor) {
    const originalMethod = descriptor.value;

    descriptor.value = function (...args: any[]) {
        const startTime = performance.now();
        console.log(`[${new Date().toISOString()}] Calling method: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
        const result = originalMethod.apply(this, args);
        const endTime = performance.now();
        const executionTime = endTime - startTime;
        console.log(`[${new Date().toISOString()}] Method ${propertyKey} returned: ${result}. Execution time: ${executionTime.toFixed(2)}ms`);
        return result;
    };

    return descriptor;
}

class ExampleClass {
    @LogMethod
    complexOperation(a: number, b: number): number {
        // Simulate a time-consuming operation
        let sum = 0;
        for (let i = 0; i < 1000000; i++) {
            sum += a + b + i;
        }
        return sum;
    }
}

const example = new ExampleClass();
example.complexOperation(5, 10);

            

              
                Copy
              
            
          

Ten rozszerzony przykład mierzy czas wykonania metody i rejestruje go wraz z bieżącym znacznikiem czasu, dostarczając bardziej szczegółowych informacji do analizy wydajności.

Autoryzacja i uwierzytelnianie

Dekoratory mogą być używane do egzekwowania zasad bezpieczeństwa poprzez sprawdzanie ról i uprawnień użytkowników przed wykonaniem metody. Może to zapobiec nieautoryzowanemu dostępowi do poufnych danych i funkcjonalności.

            
function Authorize(role: string) {
    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = function (...args: any[]) {
            const userRole = getCurrentUserRole(); // Function to retrieve the current user's role

            if (userRole !== role) {
                throw new Error(`Unauthorized: User does not have the required role (${role}) to access this method.`);
            }

            return originalMethod.apply(this, args);
        };

        return descriptor;
    };
}

function getCurrentUserRole(): string {
    // In a real application, this would retrieve the user's role from authentication context
    return 'admin'; // Example: Hardcoded role for demonstration
}

class AdminPanel {
    @Authorize('admin')
    deleteUser(userId: number) {
        console.log(`User ${userId} deleted successfully.`);
    }

    @Authorize('editor')
    editArticle(articleId: number) {
        console.log(`Article ${articleId} edited successfully.`);
    }
}

const adminPanel = new AdminPanel();

try {
    adminPanel.deleteUser(123);
    adminPanel.editArticle(456); // This will throw an error because the user role is 'admin'
} catch (error) {
    console.error(error.message);
}

            

              
                Copy
              
            
          

W tym rozszerzonym przykładzie dekorator Authorize sprawdza, czy bieżący użytkownik ma określoną rolę przed zezwoleniem na dostęp do metody. Funkcja getCurrentUserRole (która pobierałaby rzeczywistą rolę użytkownika w rzeczywistej aplikacji) służy do określenia bieżącej roli użytkownika. Jeśli użytkownik nie ma wymaganej roli, zgłaszany jest błąd, uniemożliwiając wykonanie metody.

Buforowanie

Dekoratory mogą być używane do buforowania wyników kosztownych operacji, poprawiając wydajność aplikacji i zmniejszając obciążenie serwera. Może to być szczególnie przydatne w przypadku często dostępnych danych, które nie zmieniają się często.

            
function Cache(ttl: number = 60) { // ttl in seconds, default to 60 seconds
    const cache = new Map();

    return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
        const originalMethod = descriptor.value;

        descriptor.value = async function (...args: any[]) {
            const cacheKey = `${propertyKey}-${JSON.stringify(args)}`;
            const cachedData = cache.get(cacheKey);

            if (cachedData && Date.now() < cachedData.expiry) {
                console.log(`Retrieving from cache: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
                return cachedData.data;
            }

            console.log(`Executing and caching: ${propertyKey} with arguments: ${JSON.stringify(args)}`);
            const result = await originalMethod.apply(this, args);

            cache.set(cacheKey, {
                data: result,
                expiry: Date.now() + ttl * 1000, // Calculate expiry time
            });

            return result;
        };

        return descriptor;
    };
}

class DataService {
    @Cache(120) // Cache for 120 seconds
    async fetchData(id: number): Promise {
        // Simulate fetching data from a database or API
        return new Promise((resolve) => {
            setTimeout(() => {
                resolve(`Data for ID ${id} fetched from source.`);
            }, 1000); // Simulate a 1-second delay
        });
    }
}

const dataService = new DataService();

(async () => {
    console.log(await dataService.fetchData(1)); // Executes the method
    console.log(await dataService.fetchData(1)); // Retrieves from cache
    await new Promise(resolve => setTimeout(resolve, 121000)); // Wait for 121 seconds to allow the cache to expire
    console.log(await dataService.fetchData(1)); // Executes the method again after cache expiry
})();

            

              
                Copy
              
            
          

Ten rozszerzony przykład implementuje podstawowy mechanizm buforowania za pomocą Map. Dekorator Cache przechowuje wyniki dekorowanej metody przez określony czas życia (TTL). Gdy metoda jest ponownie wywoływana z tymi samymi argumentami, zamiast ponownego wykonywania metody zwracany jest wynik z pamięci podręcznej. Po upływie TTL metoda jest ponownie wykonywana, a wynik jest buforowany.

Walidacja

Dekoratory mogą być używane do walidacji danych przed ich przetworzeniem, zapewniając integralność danych i zapobiegając błędom. Może to być szczególnie przydatne do walidacji danych wejściowych użytkownika lub danych otrzymanych ze źródeł zewnętrznych.

            
function Required() {
    return function (target: any, propertyKey: string) {
        if (!target.constructor.requiredFields) {
            target.constructor.requiredFields = [];
        }
        target.constructor.requiredFields.push(propertyKey);
    };
}

function ValidateClass(target: any) {
    const originalConstructor = target;

    function construct(constructor: any, args: any[]) {
        const instance: any = new constructor(...args);
        if (constructor.requiredFields) {
            constructor.requiredFields.forEach((field: string) => {
                if (!instance[field]) {
                    throw new Error(`Missing required field: ${field}`);
                }
            });
        }
        return instance;
    }

    const newConstructor: any = function (...args: any[]) {
        return construct(originalConstructor, args);
    };

    newConstructor.prototype = originalConstructor.prototype;
    return newConstructor;
}

@ValidateClass
class User {
    @Required()
    name: string;

    @Required()
    email: string;

    constructor(name: string, email: string) {
        this.name = name;
        this.email = email;
    }
}

try {
    const validUser = new User('John Doe', 'john.doe@example.com');
    console.log('Valid user created:', validUser);

    const invalidUser = new User('Jane Doe', ''); // Missing email
} catch (error) {
    console.error('Validation error:', error.message);
}

            

              
                Copy
              
            
          

Ten przykład używa dwóch dekoratorów: Required i ValidateClass. Dekorator Required oznacza właściwości jako wymagane. Dekorator ValidateClass przechwytuje konstruktor klasy i sprawdza, czy wszystkie wymagane pola mają wartości. Jeśli brakuje jakiegokolwiek wymagane pola, zgłaszany jest błąd.

Wstrzykiwanie zależności

Jak pokazano w przykładzie dekoratora parametru, dekoratory mogą ułatwić podstawowe wstrzykiwanie zależności, ułatwiając zarządzanie zależnościami i rozłączanie komponentów. Chociaż istnieją bardziej zaawansowane frameworki wstrzykiwania zależności, dekoratory mogą zapewnić lekką i wygodną metodę obsługi prostych scenariuszy wstrzykiwania zależności.

Uwagi i najlepsze praktyki

• Zrozum kontekst wykonania: Bądź świadomy argumentów target, propertyKey i descriptor przekazywanych do funkcji dekoratora. Argumenty te dostarczają cennych informacji o dekorowanej deklaracji i pozwalają na odpowiednią modyfikację jej zachowania.
• Używaj dekoratorów oszczędnie: Chociaż dekoratory mogą być potężne, nadużywanie może prowadzić do skomplikowanego i trudnego do zrozumienia kodu. Używaj dekoratorów roztropnie i tylko wtedy, gdy zapewniają one wyraźną korzyść pod względem możliwości ponownego użycia kodu, czytelności lub łatwości konserwacji.
• Postępuj zgodnie z konwencjami nazewnictwa: Używaj opisowych nazw dla swoich dekoratorów, aby jasno wskazać ich cel. Dzięki temu Twój kod będzie bardziej samo-dokumentujący i łatwiejszy do zrozumienia.
• Utrzymuj separację kwestii: Dekoratory powinny koncentrować się na konkretnych zagadnieniach przekrojowych i unikać mieszania niepowiązanych funkcjonalności. Poprawi to modułowość i łatwość konserwacji kodu.
• Dokładnie przetestuj swoje dekoratory: Podobnie jak każdy inny kod, dekoratory powinny być dokładnie przetestowane, aby upewnić się, że działają poprawnie i nie wprowadzają niezamierzonych efektów ubocznych.
• Uważaj na efekty uboczne: Dekoratory wykonują się w czasie wykonywania. Unikaj złożonych lub długotrwałych operacji w funkcjach dekoratora, ponieważ może to wpłynąć na wydajność aplikacji.
• Zalecane jest użycie TypeScript: Chociaż dekoratorów JavaScript można technicznie używać w zwykłym JavaScript z transpilacją Babel, są one najczęściej używane z TypeScript. TypeScript zapewnia doskonałe bezpieczeństwo typów i sprawdzanie dekoratorów w czasie projektowania.

Perspektywy globalne i przykłady

Zasady ponownego wykorzystania kodu, łatwości konserwacji i separacji kwestii, które ułatwiają dekoratory, mają uniwersalne zastosowanie w różnych kontekstach rozwoju oprogramowania na całym świecie. Jednak konkretne implementacje i przypadki użycia mogą się różnić w zależności od stosu technologicznego, wymagań projektowych i praktyk programistycznych powszechnych w różnych regionach.

Na przykład w przedsiębiorstwach Java, adnotacje (koncepcyjnie podobne do dekoratorów) są szeroko stosowane do konfiguracji i wstrzykiwania zależności (np. Spring Framework). Chociaż składnia i mechanizmy leżące u ich podstaw różnią się od dekoratorów JavaScript, podstawowe zasady metaprogramowania i AOP pozostają takie same. Podobnie w Pythonie dekoratory są funkcją języka pierwszej klasy i są często używane do zadań takich jak rejestrowanie, uwierzytelnianie i buforowanie.

Pracując w międzynarodowych zespołach lub współtworząc projekty open-source z globalną publicznością, niezbędne jest przestrzeganie standardów kodowania i najlepszych praktyk, które promują przejrzystość i łatwość konserwacji. Efektywne używanie dekoratorów może przyczynić się do bardziej modułowej i dobrze zorganizowanej bazy kodu, ułatwiając programistom z różnych środowisk współpracę i wnoszenie wkładu.

Wnioski

Dekoratory JavaScript to potężna i wszechstronna funkcja metaprogramowania, która może znacznie poprawić możliwość ponownego użycia kodu, czytelność i łatwość konserwacji. Zapewniając deklaratywny sposób dodawania metadanych i implementowania zasad AOP, dekoratory umożliwiają hermetyzację wspólnego zachowania, oddzielanie kwestii i tworzenie bardziej modułowych i dobrze zorganizowanych aplikacji. Chociaż wciąż jest to propozycja w trakcie aktywnego rozwoju, dekoratory znalazły już szerokie zastosowanie w frameworkach takich jak Angular i NestJS i mają stać się coraz ważniejszą częścią ekosystemu JavaScript. Rozumiejąc składnię, użycie i najlepsze praktyki dotyczące dekoratorów, możesz wykorzystać ich moc do tworzenia bardziej niezawodnych, skalowalnych i łatwych w utrzymaniu aplikacji.

W miarę jak ekosystem JavaScript wciąż ewoluuje, bycie na bieżąco z nowymi funkcjami i najlepszymi praktykami ma kluczowe znaczenie dla tworzenia wysokiej jakości oprogramowania, które spełnia potrzeby użytkowników na całym świecie. Opanowanie dekoratorów JavaScript to cenna umiejętność, która może pomóc Ci stać się bardziej efektywnym i produktywnym programistą.